<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link type="text/css" href="layout/jquery-ui-2/menu.css" rel="stylesheet" />
<link href="layout/jquery-ui-1/css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" >
<link type="text/css" href="layout/my.css" rel="stylesheet" />
<script type="text/javascript" src="layout/jquery-ui-1/js/jquery-1.6.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="layout/jquery-ui-1/js/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="layout/jquery-ui-2/menu.js"></script>

<script>
function request(x, y) {
	$("#result-1").hide();
	$("#result-2").hide();
	$("#result-3").hide();
	$("#loader").show();
	$("#loader").html("<img src='/TestClient/images/ajax-loader.gif' />");
	var action = "getByLocation";
	$.ajax({
		  type: 'POST',
		  url: "/TestClient/result",
		  data: {
			  "x" : x,
			  "y" : y,
			  "action" : action
		  },
		  success: function(data) {
				
			  if(data.statusCode == 1){
				$("#venues-table").html("");
			  	$("#weatherStatus").html("The weather is " + data.weatherStatus);
			  	if(data.weatherStatus == "cloudy") $("#weatherImage").html("<img src='/TestClient/images/cloudy.png' width = '150p'/>");
			  	else if(data.weatherStatus == "sunny") $("#weatherImage").html("<img src='/TestClient/images/sunny.png' width = '150p'/>");
			  	else if(data.weatherStatus == "clear") $("#weatherImage").html("<img src='/TestClient/images/sunny.png' width = '150p'/>");
			  	else if(data.weatherStatus == "rainy") $("#weatherImage").html("<img src='/TestClient/images/rainy.png' width = '150p'/>");
			  	else if(data.weatherStatus == "snowy") $("#weatherImage").html("<img src='/TestClient/images/snowy.png' width = '150p'/>");
			  	else if(data.weatherStatus == "stormy") $("#weatherImage").html("<img src='/TestClient/images/stormy.png' width = '150p'/>");
			  	
			  	$("#msg-1").html(data.msg);
			  	if(data.POIs != ""){
				  var html = "<ul><label >Suggested points of interest:</label><br/><br/>";
				  $.each(data.POIs, function(idx, el) {
					  html = html + "<li><a>" + el + "</a><br/></li>";
				  });
				  html = html + "</ul>";
				  $("#venues-table").html(html);
			  	}
			  	$("#result-3").hide();
			  	$("#result-2").hide();
			  	$("#loader").hide();
			  	$("#result-1").show();
			  }
			  if(data.statusCode == -1){
				  $("#msg-2").html(data.msg);
				  $("#result-1").hide();
				  $("#result-3").hide();
				  $("#loader").hide();
				  $("#result-2").show();
			  }
			  if(data.statusCode == -2){
				  $("#addr-table").html("");
				  var html = "<ul>";
				  $.each(data.addr, function(idx, el) {
					  html = html + "<li><a>" + el + "</a><br/></li>";
				  });					  
				  html = html + "</ul>";
				  
				  $("#addr-table").html(html);
					  $("#msg-3").html(data.msg);
				  $("#result-1").hide();
				  $("#result-2").hide();
				  $("#loader").hide();
				  $("#result-3").show();
				  
			  }
		  },
		  failure: function (data) {
			  alert("failure");		
		  }
		});
		return false;
}
	$(function() {
		$("#submit-btn").button();
		$("#first span.bg").addClass("ui-corner-tl");
		$("#menu").css("position", "relative");
		$("#menu").css("top", "55px");
		$("#location-form").submit(function() {
			
			  var x =  $(this['latitude']).val(); 
			  var y =  $(this['longitude']).val();
			  request(x, y);
				return false;
			});
	});
</script>

<title>How's the weather</title>
</head>
<body style='background-image: url("images/sky.jpg"); z-index: 0;'>
	<div id="div-wrapper">
		<t:myNavigation/>
		<div id='div-main'>
			<div id='div-content'>
				<div id="div-location">
					<FORM id="location-form" >
						<label id ='prompt'> Please type your latitude and longitude:</label><br/>
						<div id='location-fields'>
							<input type="text" id = 'latitude' class = 'ui-corner-all' name="latitude" placeholder ="Latitude"/><br/>
							<input type="text" id = 'longitude' class = 'ui-corner-all' name="longitude" placeholder ="Longitude"/><br/>
							<input type=submit id="submit-btn" value="Get Weather" name="submit" style='margin-top: 10px;'>
						</div>
					</FORM>
				</div>
				<t:proposalResult/>
			</div>
		</div>
		<a href="http://apycom.com/" style="visibility:none;"></a>
	</div>
</body>
</html>